<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script type="text/javascript" src="js/global.js"></script>
		<script src="./layui/layui.js"></script>
	</head>

	<body>
		<form class="layui-form" onsubmit="false">
			<div hidden="hidden" class="layui-form-item" style="margin-top: 20px">
				<label class="layui-form-label">ID：</label>
				<div class="layui-input-inline" style="width: 350px">
					<input type="text" name="id" id="id" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 20px">
				<label class="layui-form-label">用户名：</label>
				<div class="layui-input-inline" style="width: 350px">
					<input disabled type="text" name="loginName" id="loginName" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱：</label>
				<div class="layui-input-inline" style="width: 350px">
					<input type="text" onblur="cktxtEmail()" name="protectEmail" id="protectEmail" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">电话：</label>
				<div class="layui-input-inline" style="width: 350px">
					<input type="text" onblur="ckphone()" name="protectMtel" id="protectMtel" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-submit lay-filter="formDemo">编辑</button>
				</div>
			</div>
		</form>

		<script>
			//Demo
			layui.use(['form'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
				//监听提交
				form.on('submit(formDemo)', function(data) {
					var d = data.field; //表单中的数据，定义一个对象来接收
					var url = globalData.server + './users/update';
					$.post(url, d, function(data) {
						console.log(data);
						if(data.count > 0) {
							var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index); //再执行关闭   
						}
					}, "json");
					return false;
				});
			});
			//手机号码失去焦点后的样式
			function ckphone() {
				var phone = document.getElementById("protectMtel").value;
				//正则表达式
				var reg = /^([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})$/
				if(reg.test(phone) == true) {
					//表示通过验证
					return true;
				} else {
					layer.msg("手机号不合法", {
						icon: 6
					});
					//表示验证不通过
					return false;
				}
			}
			//邮箱地址失去焦点后的样式
			function cktxtEmail() {
				var txtEmail = document.getElementById("protectEmail").value;
				//正则表达式
				var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(reg.test(txtEmail) == true) {
					//表示验证通过
					return true;
				} else {
					layer.msg("邮箱地址不合法", {
						icon: 6
					});
					//表示验证不通过
					return false;
				}
			}
		</script>
	</body>

</html>